<template>
    <div class="c-cfg-editlist">
        <Alert v-if="title" style="margin-bottom: 6px;">{{ title }}</Alert>
        <div class="header flex">
            <span class="col-cell num" v-if="showNum">{{ $t(`global.number`) }}</span>
            <span class="col-cell" v-for="item,index in columns" :key="index">{{ item.title }}</span>
            <span class="col-cell option" v-if="showNum">{{ $t(`global.operate`) }}</span>
        </div>
        <div class="content">
            <div class="col-item flex" v-for="(item, index) in _value" :key="index">
                <span class="col-cell num">{{ index + 1 }}</span>
                <Input class="col-cell" v-for="(cItem, cIndex) in columns" :key="cIndex"
                    v-model="item[cIndex]" @on-change="change"/>
                <span class="col-cell option">
                <Button class="btn-del" @click="removeLine(index)">-</Button>
                </span>
            </div>
        </div>
        <div class="addline">
            <div class="col-item flex">
                <span class="col-cell num">*</span>
                <Input class="col-cell" v-for="(cItem, cIndex) in columns" :key="cIndex" clearable
                    v-model="addLineItem[cIndex]"/>
                <span class="col-cell option">
                <Button class="btn-add" @click="addLine()">+</Button>
                </span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            addLineItem: []
        }
    },
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: {
            default() {
                return [];
            }
        },
        title: {
            default() {
                return '';
            }
        },
        showNum: {
            default() {
                return true;
            }
        },
        columns: {
            default() {
                return [];
            }
        },
        valueType: {
            default() {
                return 'array'; // map array
            }
        },
    },
    computed: {
        _value() {
            if (this.valueType === 'map') {
                let res = []
                if (Array.isArray(this.value) || !this.value) {
                    return {}
                } else {
                    Object.keys(this.value).forEach(key => {
                        res.push([key, this.value[key]])
                    })
                    return res
                }
            }
            return this._value
        }
    },
    methods: {
        addLine() {
            if (!this.addLineItem[0] || !this.addLineItem[1]) {
                return
            }
            this._value.push(this.addLineItem)
            this.addLineItem = []
            this.change()
        },
        removeLine(index) {
            this._value.splice(index, 1)
            this.change()
        },
        change() {
            let res
            if (this.valueType === 'map') {
                res = {}
                this._value.forEach((item, index) => {
                    res[item[0] || `key${index}`] = item[1]
                })
            } else {
                res = this._value
            }
            this.$emit('change', res)
        }
    }
}
</script>

<style lang="less" scoped>
.header {
    .col-cell {
        background-color: #f7f7f7;
    }
}
.col-item {
    margin: 6px 0;
}
.col-cell {
    flex: 1;
    line-height: 36px;
    text-align: center;
    border: 1px solid #dcdee2;
    border-radius: 4px;
    + .col-cell {
        margin-left: 6px;
    }
    &.num {
        flex: 0 0 50px;
        background-color: #f7f7f7;
    }
    /deep/ .ivu-input {
        border: none;
    }
    &.option {
        flex: 0 0 60px;
        border: none;
    }
}
</style>